<template>
  <!-- count-to组件

      Property	Description	            type	      default
      startVal	开始值	                  Number	    0
      endVal	  结束值                   Number	    2017
      duration	持续时间，以毫秒为单位	    Number	    3000
      autoplay	自动播放	                Boolean	    true
      decimals	要显示的小数位数	          Number	    0
      decimal	  十进制分割	              String	    .
      separator	分隔符	                  String	    ,
      prefix	  前缀	                    String	    ''
      suffix	  后缀	                    String	    ''
      useEasing	使用缓和功能    	        Boolean	    true
      easingFn	缓和回调	                Function	  —

      注意：当autoplay：true时，它将在startVal或endVal更改时自动启动

      功能:
      Function Name	       Description
      mountedCallback	     挂载以后返回回调
      start	               开始计数
      pause	               暂停计数
      reset	               重置countTo
-->

  <el-row :gutter="40">
    <!--   访问量IP   -->
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-visits">
          <svg-icon icon-class="visits" class-name="card-panel-icon"/>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            访问量IP
          </div>
          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num"/>
        </div>
      </div>
    </el-col>
    <!--   在线用户   -->
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-online">
          <svg-icon icon-class="online" class-name="card-panel-icon"/>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            在线用户
          </div>
          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num"/>
        </div>
      </div>
    </el-col>
    <!--   访问量PV   -->
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-browse">
          <svg-icon icon-class="browse" class-name="card-panel-icon"/>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            浏览量
          </div>
          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num"/>
        </div>
      </div>
    </el-col>
    <!--   新闻数量   -->
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-news">
          <svg-icon icon-class="news" class-name="card-panel-icon"/>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            新闻
          </div>
          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num"/>
        </div>
      </div>
    </el-col>

    <el-col :xs="24" :sm="24" :lg="24" class="card-panel-col">
      <div class="card-current-user-information">
        <span class="card-panel-tag">客户端ip地址：</span>
        <span class="card-panel-tag">地区：</span>
        <span class="card-panel-tag">当前用户：</span>
        <span class="card-panel-tag">当前角色：</span>
        <span class="card-panel-tag">上次登录时间：</span>
        <span class="card-panel-tag">本次登录时间：</span>
      </div>
    </el-col>
  </el-row>


</template>

<script>
import CountTo from 'vue-count-to'

export default {
  name: "panelComponent",
  components: {
    CountTo,
  },
  data(){
    return{

    }
  },
  methods:{

  }






}
</script>


<!-- 去掉 scoped 全局生效 -->
<style scoped>


.card-panel-col {
  margin-bottom: 32px;
}

.card-panel {
  height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .05);
}

.card-current-user-information {
  height: 50px;
  color: #666;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .05);

  display: grid;
  grid-gap: 20px 12px;
  grid-column: span 6;
  grid-template-columns: repeat(6, 1fr);
}

.card-panel-tag {
  font-size: 12px;
  line-height: 50px;
  padding-left: 20px;
}

.card-panel-icon-wrapper:hover {
  color: #fff;
}


.icon-visits:hover {
  background: #40c9c6;
}

.icon-news:hover {
  background: #36a3f7;
}

.icon-online:hover {
  background: #f4516c;
}

.icon-browse:hover {
  background: #34bfa3
}

.icon-visits {
  color: #40c9c6;
}

.icon-news {
  color: #36a3f7;
}

.icon-online {
  color: #f4516c;
}

.icon-browse {
  color: #34bfa3
}


.card-panel-icon-wrapper {
  float: left;
  margin: 14px 0 0 14px;
  padding: 16px;
  transition: all 0.38s ease-out;
  border-radius: 6px;
}

.card-panel-icon {
  float: left;
  font-size: 48px;
}

.card-panel-description {
  float: right;
  font-weight: bold;
  margin: 26px 26px 26px 0px;
}

.card-panel-text {
  line-height: 18px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  margin-bottom: 12px;
}

.card-panel-num {
  font-size: 20px;
}


</style>
